<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="content">
        <table border="1">
            <thead class="thead">
                <tr>
                    <th>全选<input type="checkbox" name="" class="check-all"></th>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>小计</th>
                </tr>
            </thead>
            <tr>
                <td>总计</td>
                <td></td>
                <td></td>
                <td><span class="total-num"></span>件</td>
                <td><span class="total-price"></span>元</td>
            </tr>
        </table>
    </div>
    <script src="./数据.js"></script>
    <script src="./jq.js"></script>
    <script>
        $(function () {


            var cartList = JSON.parse(localStorage.getItem('cartList')) || [];
            var cartGoods = []

            window.onload = function () {

                getDataById();

                getTotal()

            }

            function getDataById() {
                if (cartList.length) {

                    $.each(cartList, function (i, item) {

                        console.log(item);
                        $.each(goodsList, function (num, goods) {

                            if (goods.id == item) {
                                goods.num = 1;
                                goods.isChecked = false;
                                // goods.price = goods.price * 10000;
                                cartGoods.push(goods)
                            }
                        })
                    })
                    console.log(cartGoods);

                    renderTable(cartGoods)
                } else {

                    var content = '<tr><td colspan=5>购物车为空,买买买！</td></tr>';
                    $('.thead').after(content);
                }
            }

            function renderTable(data) {
                var content = '';
                $.each(data, function (i, item) {
                    content += "<tr><td><input type=checkbox class=check-item></td>" +
                        "<td>" + item.name + "</td>" +
                        "<td>" + item.price + "</td>" +
                        "<td>" + item.num + "</td>" +
                        "<td>" + item.num * item.price + "</td>" +
                        "</tr>"
                })
                // console.log(content);
                $('.thead').after(content);
            }


            $('.check-all').change(function () {

                let flag = this.checked;

                $.each(cartGoods, function (i, item) {
                    item.isChecked = flag;
                })

                $.each($('.check-item'), function (i, item) {
                    item.checked = flag
                })
                getTotal()
            })


            $('.content').on('change', '.check-item', function () {
                var isAll = false;
                var arr = [];
                $.each($('.check-item'), function (i, item) {

                    cartGoods[i].isChecked = item.checked;
                    arr.push(item.checked)
                })
                isAll = arr.every(function (a) {
                    return a
                });

                $('.check-all').prop('checked', isAll);
                getTotal()
            })


            function getTotal() {
                var totalNum = 0;
                var totalPrice = 0;
                cartGoods.map(function (item, index) {
                    if (item.isChecked) {
                        totalNum += item.num;
                        totalPrice += item.num * item.price;
                    }
                    totalPrice = totalPrice;
                })
                $('.total-num').html(totalNum);
                $('.total-price').html(totalPrice);
            }
        })
    </script>
    <!-- Code injected by live-server -->
    <script type="text/javascript">
        // <![CDATA[  <-- For SVG support
        if ('WebSocket' in window) {
            (function () {
                function refreshCSS() {
                    var sheets = [].slice.call(document.getElementsByTagName("link"));
                    var head = document.getElementsByTagName("head")[0];
                    for (var i = 0; i < sheets.length; ++i) {
                        var elem = sheets[i];
                        var parent = elem.parentElement || head;
                        parent.removeChild(elem);
                        var rel = elem.rel;
                        if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                            var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                            elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                        }
                        parent.appendChild(elem);
                    }
                }
                var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
                var address = protocol + window.location.host + window.location.pathname + '/ws';
                var socket = new WebSocket(address);
                socket.onmessage = function (msg) {
                    if (msg.data == 'reload') window.location.reload();
                    else if (msg.data == 'refreshcss') refreshCSS();
                };
                if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
                    console.log('Live reload enabled.');
                    sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
                }
            })();
        }
        else {
            console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
        }
	// ]]>
    </script>
</body>

</html>